<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>

    <style>
        .active{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <!-- 
        参考学习： 
        
    -->
    <script src="./vue.global.prod.js"></script>

    <div id="app">
     <h1>代办事项列表2</h1>
     <div>
        事项：<input type="text" v-model="taskInput" @keyup.enter="add()">
        <button @click="add()">添加</button>
     </div>
     <div>
        <ul>
            <li v-for="(item, index) in listShow" :key="index">
                <input type="checkbox" v-model="item.done">
                <!-- <span v-if="!item.done">{{item.content}}</span> -->
                <!-- <span v-else style="text-decoration: line-through;">{{item.content}}</span> -->
                <!-- <span :class="{active:item.done}">{{item.content}}</span> -->
                <span :style="{'text-decoration': item.done ? 'line-through' : 'none'}">{{item.content}}</span>
                <button @click="remove(index)">X</button>
            </li>
        </ul>
     </div>
     <button @click="toggleShow()">{{ showAll ? '显示所有' : '隐藏已完成'}}</button>

    </div>

    <script>
        // 对象解构，从Vue对象中获取createApp函数
        const { createApp } = Vue

        // 通过createApp函数创建一个app对象
        const app = createApp({
            data() {
                return {
                    showAll:false,
                    taskInput:null,
                    list: [
                        // {
                        //     content:'任务1',
                        //     done:true
                        // }
                    ],
                }
            },
            methods: {
                add(){
                    this.list.push({content:this.taskInput,done:false})
                    this.taskInput = null
                },
                remove(index){
                    this.list.splice(index,1)
                },
                toggleShow(){
                    this.showAll = !this.showAll
                }
            },
            computed: {
                listShow(){
                    if (!this.showAll) {
                        return this.list
                    } else{
                        return this.list.filter( item => item.done==false)
                    }
                }
            }
        })

        // app对象挂载到id="app"的HTML元素，关联起来
        app.mount('#app')

    </script>

</body>
</html>